<%@ page language="java" import="java.util.*"
	contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	ArrayList<String> jsPaths = (ArrayList<String>) request
			.getAttribute("jsPaths");
	jsPaths.add("/resources/bootstrap/table/jquery.dataTables.min.js");
	jsPaths.add("/resources/bootstrap/table/dataTables.bootstrap.js");
	jsPaths.add("/resources/bootstrap/dist/js/typeahead.js");
	jsPaths.add("/resources/custom/location/location.js");
%>

<link
	href="${pageContext.request.contextPath}/resources/bootstrap/table/dataTables.bootstrap.css"
	rel="stylesheet">
<link
	href="${pageContext.request.contextPath}/resources/bootstrap/dist/css/typeaheadjs.css"
	rel="stylesheet">
<link
	href="${pageContext.request.contextPath}/resources/custom/location/location.css"
	rel="stylesheet">

<script type="text/javascript">
	var errorMsg = "${error}";
</script>
<div id="alert-warning"
	class="alert alert-warning alert-dismissable hidden">
	<button type="button" class="close" data-dismiss="alert"
		aria-hidden="true">&times;</button>
</div>

<div class="row">
	<h2 class="sub-header">Location List</h2>

	<div class="row">
		<div class="col-sm-3">

			<label for="searchProvince" class="col-sm-4 control-label">Province:</label><input
				name="searchProvince" id="searchProvince" placeholder="province"
				class="col-sm-8">
		</div>
		<div class="col-sm-3">
			<label for="searchCity" class="col-sm-4 control-label">City:</label><input
				name="searchCity" id="searchCity" placeholder="city"
				class="col-sm-8">
		</div>
		<div class="col-sm-3">
			<label for="searchDistrict" class="col-sm-4">District:</label><input
				name="searchDistrict" id="searchDistrict" placeholder="district"
				class="col-sm-8">
		</div>
		<div class="col-sm-3"></div>
	</div>

	<button class="btn btn-success btn-sm" data-toggle="modal"
		data-target="#myModal" id="addLocation">Add</button>
</div>
<div class="row">
	<div class="table-responsive">
		<table class="table table-striped" id="location">
			<thead>
				<tr>
					<th>Province</th>
					<th>City</th>
					<th>District</th>
					<th>Options</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
	</div>
</div>

<!-- add location dialog -->
<div class="modal fade" id="createLocationModal" tabindex="-1"
	role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">Location</h4>
			</div>

			<form id="addForm" class="form-horizontal" role="form"
				action="${pageContext.request.contextPath}/location/create"
				method="post">
				<div class="modal-body">
					<div class="form-group">
						<label for="Province" class="col-sm-3 control-label">Province</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="province"
								name="province" placeholder="Province">
						</div>
					</div>
					<div class="form-group">
						<label for="city" class="col-sm-3 control-label">City</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="city" name="city"
								placeholder="City">
						</div>
					</div>
					<div class="form-group">
						<label for="district" class="col-sm-3 control-label">District</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="district"
								name="district" placeholder="District">
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="submit" class="btn btn-primary" id="create">Create
						Location</button>
				</div>
			</form>
		</div>
	</div>
</div>
<!-- edit location dialog -->
<div class="modal fade" id="editLocationModal" tabindex="-1"
	role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">Location</h4>
			</div>

			<form id="editForm" class="form-horizontal" role="form"
				action="${pageContext.request.contextPath}/location/update"
				method="post">
				<div class="modal-body">
					<input type="hidden" id="idEdit" name="id">
					<div class="form-group">
						<label for="province" class="col-sm-3 control-label">Province</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="provinceEdit"
								name="province" placeholder="Province">
						</div>
					</div>
					<div class="form-group">
						<label for="city" class="col-sm-3 control-label">City</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="cityEdit" name="city"
								placeholder="City">
						</div>
					</div>
					<div class="form-group">
						<label for="district" class="col-sm-3 control-label">District</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="districtEdit"
								name="district" placeholder="District">
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="submit" class="btn btn-primary">Save
						Location</button>
				</div>
			</form>
		</div>
	</div>
</div>
<!-- delete location dialog -->
<div class="modal fade" id="deleteLocationModal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title">Location Delete</h4>
			</div>
			<div class="modal-body">
				<p>This action will delete location information without
					recovery, are you sure to do this?</p>
			</div>
			<form class="form-horizontal" role="form"
				action="${pageContext.request.contextPath}/location/delete"
				method="post">
				<input type="hidden" class="form-control" id="idDelete" name="id">

				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="submit" class="btn btn-primary">Delete</button>
				</div>
			</form>
		</div>

	</div>

</div>